<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>缓存运动</title>
<style>
    #div1{width: 100px;height: 100px;background: green;position: absolute;left: 0;top: 50px;}
    #div2{width: 1px;height: 300px;background: blueviolet;position: absolute;left: 300px;top: 0px;}
</style>
<script type="text/javascript">
    function startMove(){
        var oDiv=document.getElementById('div1');
        setInterval(function(){
            var speed=(300-oDiv.offsetLeft)/10;
            speed=speed>0?Math.ceil(speed):Math.floor(speed);//向上取整和向下取整
            oDiv.style.left=oDiv.offsetLeft+speed+'px';
            document.title=oDiv.offsetLeft+','+speed;
        },30);
    };
</script>    

</head>
<body>
    <input type="button" value="开始运动" onclick="startMove()">
    <div id="div1"></div>
    <div id="div2"></div>
</body>
</html>